<%--
  Created by ganlu
  Date: 2016-10-6 13:17
  功能：用户中心
--%>
<%@ page contentType="text/html;charset=utf-8" language="java"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="renderer" content="webkit">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <title>便民服务平台3.0-用户中心</title>
</head>
<body>
<jsp:include page="../include/header.jsp"></jsp:include>
<script src="<c:url value='/resource/js/lib/template.js'/>"></script>
<div class="main-container">
    <div class="mc-hd">
        <p class="user-t">Personal center</p>
    </div>
    <div class="mc-bd">
        <div class="userCentre">
            <div class="container">
                <div class="row">
                    <div class="col-sm-3 uc-left">
                        <div class="ucl-hd">
                            <div class="ucl-avatar">
                                <span>

                                 <c:choose>
                                     <c:when test="${pic==''}">
                                         <img id="rndpic" src="<c:url value='/resource/images/p-01.jpg'/>">
                                     </c:when>
                                     <c:otherwise>
                                         <img id="rndpic" src="data:image/png;base64,${pic}"/>
                                     </c:otherwise>
                                 </c:choose>
                                 </span>
                            </div>
                            <div class="ucl-phoneNumber">${current_member.acountId}</div>
                            <div class="ucl-real">认证：<span><i></i>实名认证</span></div>
                            <ul class="ucl-m">
                                <li><a href="#">资料管理</a></li>
                                <li><a href="#">邮寄管理</a></li>
                            </ul>
                        </div>
                        <div class="ucl-bd">
                            <div class="ucl-menu">
                                <div class="ucl-menu-title">个人中心</div>
                                <ul class="first-menu">
                                    <li>
                                        <a href="#sm1" data-toggle="collapse">业务管理 <i class="arr"></i></a>
                                        <ul id="sm1" class="second-menu collapse">
                                            <li url="<c:url value='/usercenter/tasks'/>" id="tasks"><a href="javascript:;"><i></i>我的办件</a></li>
                                            <li url="<c:url value='/usercenter/appointments'/>"><a href="javascript:;"><i></i>我的预约</a></li>
                                            <li url="<c:url value='/usercenter/consults'/>"><a href="javascript:;"><i></i>我的咨询</a></li>
                                            <li url="<c:url value='/usercenter/complains'/>"><a href="javascript:;"><i></i>我的投诉</a></li>
                                            <li url="<c:url value='/usercenter/satisfactions'/>"><a href="javascript:;"><i></i>我的评价</a></li>
                                        </ul>
                                    </li>
                                    <li>
                                        <a href="#sm2" data-toggle="collapse">账号管理 <i class="arr"></i></a>
                                        <ul id="sm2" class="second-menu collapse">
                                            <li><a href="javascript:;"><i></i>安全认证</a></li>
                                            <li  id="userinfo" url="<c:url value='/usercenter/userinfo'/>"><a href="javascript:;"><i></i>信息资料</a></li>
                                            <li><a href="javascript:;"><i></i>信息绑定</a></li>
                                            <li><a href="javascript:;"><i></i>邮寄地址</a></li>
                                            <li><a href="javascript:;"><i></i>号码变更</a></li>
                                        </ul>
                                    </li>
                                    <li url="<c:url value='/usercenter/usermessage'/>">
                                        <a href="javascript:;" />消息提醒</a>
                                    </li>
                                    <li url="<c:url value='/usercenter/logoff'/>">
                                        <a href="javascript:;">账号注销</a>
                                    </li>
                                </ul>
                            </div>
                        </div>
                    </div>
                    <div class="col-sm-9 uc-right">
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<jsp:include page="../include/footer.jsp" />
<script src="<c:url value='/resource/js/require.js'/>" data-main="<c:url value='/resource/js/main.js'/>" id="current-page" current-page ="userCenter"></script>
</body>
</html>
<script>
    $(function () {
        var id="${active}";
        $("#"+id).addClass("active");
        var lis=$("#"+id).parents("li");
        if(lis.length>0) {
            var li=lis[0];
            var ul = $("#" + id).parents("ul")[0];
            var i = $(li).find(".arr")[0];
            $(i).addClass("rotate");
            $(ul).addClass("in");
            $(li).addClass("active");
        }


        $("li[url]").each(function () {
            $(this).click(function () {
                $(".uc-right").load($(this).attr("url"));
                $("li .active").removeClass("active");
            });
            if($(this).attr("class")=="active"){
                $(".uc-right").load($(this).attr("url"));
            }
        });
    });
    /*
     * 列表分页方法
     * 参数传递示例
     {
     type: "GET"
     data:{pageSize:3,pageIndex:1},   --pageSize 当前页显示条数，  pageIndex：当前页
     url: "aa.aspx?1=1",   获取数据URL
     tempId: "mysccriptid",   模板ID
     paginger: "pagination2",  分页控件ID
     containerId: "mytask_clz_dv",  加载数据容器ID
     errorCallback: function (data){ alert(data); }  错误回调函数
     }
     */
    var Paging = function (option) {
        var myoption = option || {};
        this.getPagList = function () {
            var myurl = myoption.url;
            $.ajax({
                type: myoption.type,
                url: myurl,
                data: myoption.data,
                dataType: "json",
                success: function (resp) {
                    if(resp.succ) {
                        var shtml = template(myoption.tempId, resp.data);
                        $("#" + myoption.containerId).html(shtml);
                        paginator(resp.data);
                    }else{
                        toast(resp.msg);
                    }
                },
                error: function (resp) {
                    if (typeof (option.errorCallback) == "function") {
                        option.errorCallback(resp);
                    }
                }
            });
        }

        //设置分页条数据（私有方法）
        function paginator(resdata) {
            var _trow=resdata.totalRow==0?1:resdata.totalRow;
            $.jqPaginator('#' + myoption.paginger, {
                totalCounts: _trow,
                pageSize: resdata.pageSize,
                visiblePages: 10,
                currentPage: resdata.pageIndex,
                onPageChange: function (num, type) {
                    if (type == "change") {
                        var custom = option;
                        custom.data.pi = num;
                        new Paging(custom).getPagList();
                    }
                }
            });
        }
    }
</script>